<template>
	<view class="wrap">
		<view class="waterfall-wrap">
			<view
				class="meeizi-warter"
				v-for="(item, index) in meiziList"
				:key="item._id"
				@click="jumpToDetail(item)"
			>
				<!-- #ifndef MP-WEIXIN -->
				<u-lazy-load
					threshold="-450"
					border-radius="10"
					:image="item.image"
					:index="index"
				></u-lazy-load>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="meeizi-img-wrap">
					<image class="meeizi-image" :src="item.image" mode="widthFix"></image>
				</view>
				<!-- #endif -->
				<view class="meeizi-title">{{ item.title }}</view>
				<view class="meeizi-date">{{ item.date }}</view>
				<view class="meizi-favorite" @click.stop="favoriteItem(item)">
					<image
						class="meizi-favorite-icon"
						:src="item.isFavorited ? '../../static/heart-fill.svg' : '../../static/heart.svg'"
					></image>
					<text class="meizi-favorite-num">{{ item.favoriteNum }}</text>
				</view>
			</view>
		</view>
		<u-loadmore
			class="loadmore"
			bg-color="#f5f5f5"
			:status="loadStatus"
			@loadmore="addRandomData"
		></u-loadmore>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loadStatus: 'loadmore',
			meiziList: [],
			totalCount: 0,
			pageIndex: 1,
			userId: uni.getStorageSync('userId'),
			shareImg: require('../../static/shareImg.jpg')
		};
	},
	onLoad() {
		// 加载数据
		this.getMeiziList();
	},
	onShow() {
		this.userId = uni.getStorageSync('userId');
	},
	onPullDownRefresh() {
		this.meiziList=[]
		this.pageIndex=1
		this.getMeiziList(1)	},
	onReachBottom() {
		if (this.totalCount > this.meiziList.length) {
			this.pageIndex++;
			this.loadStatus = 'loading';
			this.getMeiziList();
		}
	},
	watch: {
		userId(val) {
			this.pageIndex = 1;
			this.meiziList = [];
			this.getMeiziList();
		}
	},
	methods: {
		// 获取瀑布流列表
		getMeiziList(tag) {
			uni.showLoading({
					title: '加载中'
			})
			uniCloud
				.callFunction({
					name: 'getMeiziList',
					data: {
						pageIndex: this.pageIndex,
						pageSize: 12,
						userId: uni.getStorageSync('userId')
					}
				})
				.then(res => {
					if (res.result.code === 0) {
						const { total, list } = res.result.data;
						this.meiziList.push(...list);
						this.totalCount = total;
						if (this.meiziList.length >= total) {
							this.loadStatus = 'nomore';
						} else {
							this.loadStatus = 'loadmore';
						}
					} else {
						uni.showToast({
							title: '服务器错误',
							icon: 'none'
						});
					}
					if(tag){
						uni.stopPullDownRefresh();
					}
					uni.hideLoading();
				})
				.catch(err => {
					uni.showToast({
						title: '服务器错误',
						icon: 'none'
					});
					if(tag){
						uni.stopPullDownRefresh();
					}
					uni.hideLoading();
				});
		},
		// 跳转至详情页
		jumpToDetail(item) {
			const { title, date, image } = item;
			uni.navigateTo({
				url: `../detail/detail?title=${title}&image=${image}&date=${date}`
			});
		},
		// 处理是否喜欢
		favoriteItem(record) {
			const userId = uni.getStorageSync('userId');
			if (!userId) {
				this.$mz.pleaseLogin();
				return;
			}
			const target = this.meiziList.filter(item => item._id === record._id)[0];
			const num = target.favoriteNum;
			if (target.isFavorited) {
				// 如果当前是喜欢的，则减1
				uniCloud
					.callFunction({
						name: 'removeFavorite',
						data: {
							mzId: target._id,
							userId,
							favoriteNum: target.favoriteNum
						}
					})
					.then(res => {
						if (res.result.code === 0) {
							target.favoriteNum--;
							target.isFavorited = !target.isFavorited;
						} else {
							uni.showToast({
								title: '服务器错误',
								icon: 'none'
							});
						}
					})
					.catch(err => {
						uni.showToast({
							title: '服务器错误',
							icon: 'none'
						});
					});
			} else {
				// 如果当前不是喜欢的，则加1
				uniCloud
					.callFunction({
						name: 'addFavorite',
						data: {
							mzId: target._id,
							userId,
							favoriteNum: target.favoriteNum,
							date: this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd')
						}
					})
					.then(res => {
						if (res.result.code === 0) {
							target.favoriteNum++;
							target.isFavorited = !target.isFavorited;
						} else {
							uni.showToast({
								title: '服务器错误',
								icon: 'none'
							});
						}
					})
					.catch(err => {
						uni.showToast({
							title: '服务器错误',
							icon: 'none'
						});
					});
			}
			console.log(target);
		},
		clear() {
			this.$refs.uWaterfall.clear();
		}
	},
	// 分享
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: '美女相册',
			imageUrl: this.shareImg,
			path: '/pages/index/index'
		};
	}
};
</script>

<style lang="scss" scoped>
.waterfall-wrap {
	width: 100%;
	column-count: 2;
	column-gap: 0;
}
.meeizi-warter {
	break-inside: avoid;
	box-sizing: border-box;
	border-radius: 8px;
	margin: 5px;
	background-color: #ffffff;
	padding: 5px;
	position: relative;
}

.meeizi-img-wrap {
}

.meeizi-image {
	width: 100%;
	border-radius: 4px;
}

.meeizi-title {
	font-size: 30rpx;
	margin-top: 5px;
	color: $u-main-color;
}

.meeizi-date {
	font-size: 22rpx;
	color: $u-tips-color;
	margin-top: 5px;
}
.meizi-favorite {
	position: absolute;
	top: 28rpx;
	right: 28rpx;
	display: flex;
	height: 48rpx;
	padding: 4rpx 12rpx;
	border-radius: 48rpx;
	border: 1px solid #efefef;
	background: rgba(0, 0, 0, 0.2);

	.meizi-favorite-icon {
		width: 48rpx;
		height: 48rpx;
		line-height: 48rpx;
		margin-right: 8rpx;
	}
	.meizi-favorite-num {
		line-height: 48rpx;
		color: #fff;
	}
}
.loadmore {
	margin: 20rpx;
}
</style>
